<div class="main-modal fixed w-full h-100 inset-0 z-50 overflow-hidden flex justify-center items-end md:items-center animated fadeIn faster" style="background: rgba(0,0,0,.7);display: none;">
	<div class="shadow-lg modal-container bg-white w-full md:max-w-md mx-auto rounded-t-lg md:rounded-b-lg shadow-lg z-50 overflow-y-auto">
		<div class="modal-content py-4 text-left px-6">
			<!--Title-->
			<div class="flex justify-between items-center pb-3">
				<p id="modal-title" class="text-2xl font-bold">Register</p>
				<div class="modal-close cursor-pointer z-50">
					<svg class="fill-current text-black" xmlns="http://www.w3.org/2000/svg" width="18" height="18"
						viewBox="0 0 18 18">
						<path
							d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z">
						</path>
					</svg>
				</div>
			</div>
			<!--Body-->
			<div id="form-modal">
				<form id="register-form" class="my-5">
					<div class="mb-4">
						<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">Name</label>
						<input class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" id="name" type="text" placeholder="Jane Doe" required="True">
						<p id="error-name" class="text-xs text-red-500 mt-2 hidden">This field is required</p>
					</div>
					<div class="mb-4">
						<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">E-mail</label>
						<input class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" id="email" type="email" placeholder="jane@example.com" required="True">
						<p id="error-email" class="text-xs text-red-500 mt-2 hidden">Please enter a valid email</p>
					</div>
					<div class="mb-6">
						<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">Organization You Represent</label>
						<input class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white" id="organization" type="text" placeholder="Cool Stuff Inc.">
						<p id="error-organization" class="text-xs text-red-500 mt-2 hidden">This field is required</p>
					</div>
				</form>
				<!--Footer-->
				<div id="actions" class="flex justify-end pt-5">
					<button href="#responsive-header" class="font-mono font-base font-mono no-underline text-grey-darkest mr-3 bg-gray-400 px-3 py-2 rounded border-gray-500 border-b-4 hover:border-gray-600 modal-close w-1/5">
						Cancel
					</button>
					<button href="#responsive-header" class="font-mono font-base font-mono no-underline text-grey-darkest bg-yellow-400 px-3 py-2 rounded border-yellow-500 border-b-4 hover:border-yellow-600 w-4/5" onclick="register()">
						Pay ₹300<br>
						<!-- <span class="text-xs">Register</span> -->
					</button>
				</div>
			</div>

			<div id="success" class="py-20 md:py-5">
				<div class="success-checkmark">
					<div class="check-icon" id='check-icon'>
						<span class="icon-line line-tip"></span>
						<span class="icon-line line-long"></span>
						<div class="icon-circle"></div>
						<div class="icon-fix"></div>
					</div>
				</div>
				<div class="text-center">You have successfully registered for IndiaOS. </div>
				<div class="text-center text-gray-600">P.S. We will send an email with the ticket attached once we authorize the payment.</div>
			</div>

			<div id="already-registered" class="py-12 md:py-5">
				<img id="emoji-already-registered" class="mx-auto w-24 h-24 m-10 animated faster grow" src="/assets/indiaos/img/monocle.png"></img>
				<div class="text-center">You have already registered for IndiaOS. We will send you a reminder 3 days before the conference.</div>
			</div>

			<div id="registrations-closed" class="py-12 md:py-5">
				<img id="emoji-registrations-closed" class="mx-auto w-24 h-24 m-10 animated faster grow" src="/assets/indiaos/img/sleeping-face.png"></img>
				<div class="text-center">The registrations for IndiaOS have closed.</div>
				<div class="text-center text-gray-600"> Don't worry we will publish all the talks on YouTube, stay tuned.</div>
			</div>

			<div id="payment-failed" class="py-12 md:py-5">
				<img id="emoji-payment-failed" class="mx-auto w-24 h-24 m-10 animated faster grow" src="/assets/indiaos/img/bandage.png"></img>
				<div class="text-center">Looks like the payment could not be completed.</div>
				<div class="text-center text-gray-600">If you think there is a problem, just drop in an email at shivam@frappe.io</div>
			</div>

			<div id="loading-payment" class="py-12 md:py-5 flex text-center">
				<div class="lds-ripple inline-block"><div></div><div></div></div>
				<div class="text-center">Loading the Payment Gateway</div>
			</div>
		</div>
	</div>
</div>

{% block script %}
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
	const modal = document.querySelector('.main-modal');
	const closeButton = document.querySelectorAll('.modal-close');
	const pages = ['form-modal', 'success', 'already-registered', 'loading-payment', 'payment-failed', 'registrations-closed']

	// let token = "123456";

	const modalClose = () => {
		modal.classList.remove('fadeIn');
		modal.classList.add('fadeOut');
		setTimeout(() => {
			modal.style.display = 'none';
			resetModal();
		}, 500);
	}

	for (let i = 0; i < closeButton.length; i++) {
		const elements = closeButton[i];
		elements.onclick = (e) => modalClose();
		modal.style.display = 'none';
		window.onclick = function (event) {
			if (event.target == modal) modalClose();
		}
	}

	function setTitle(title) {
		document.getElementById('modal-title').innerHTML = title;
	}

	function setPage(id) {
		pages.forEach(page => {
			document.getElementById(page).style.display = "none"
		})
		document.getElementById(id).style.display = "block";
	}

	function show(id, display="block") {
		document.getElementById(id).style.display = display;
	}

	function resetModal() {
		setPage('form-modal');
		setTitle("Register");
	}

	// Page Switching Functions

	const openModal = () => {
		resetModal();
		modal.classList.remove('fadeOut');
		modal.classList.add('fadeIn');
		modal.style.display = 'flex';
	}

	function success() {
		setPage('success')
		setTitle("Yayy 🎉");
		window.addEventListener("focus", function(event) {
			setTimeout(function () {
				show('check-icon')
			}, 10);
		}, false);
	}

	function redirecting() {
		setPage('loading-payment')
		setTitle("Redirecting");
	}

	function fail(reason) {
		setPage(reason)
		setTitle("Oops!");
		window.addEventListener("focus", function(event) {
			setTimeout(function () {
				show(`emoji-${reason}`)
			}, 10);
		}, false);
	}

	function make_payment(ticket) {
		var options = {
			"name": "IndiaOS",
			"description": "Conference Ticket",
			"image": "https://indiaos.in/assets/indiaos/img/indiaos.png",
			"prefill": {
				"name": ticket.full_name,
				"email": ticket.email,
			},
			"theme": {
				"color": "#F6E05E"
			},
			"doctype": "Conference Participant",
			"docname": ticket.name
		};

		options.modal = {
			ondismiss: () => {
				openModal();
				fail('payment-failed');
			}
		};

		razorpay = new frappe.checkout.razorpay(options)
		razorpay.on_open = () => {
			modalClose();
		}
		razorpay.on_success = () => {
			openModal();
			success();
		}
		razorpay.on_fail = () => {
			openModal();
			fail('payment-failed');
		}
		razorpay.init()
	}


	function register() {
		let validated = true
		let inputs = ['name', 'email', 'organization'];
		inputs.forEach((id) => {
			let element = document.getElementById(id)
			if(!element.checkValidity()) {
				validated = false
				document.getElementById(`error-${id}`).classList.remove("hidden")
			}
			else {
				document.getElementById(`error-${id}`).classList.add("hidden")
			}
		});

		if (validated) {
			let form = {}
			inputs.forEach((id) => form[id] = document.getElementById(id).value)
			form.event = "IndiaOS 2020"
			redirecting();
			frappe.call('indiaos.indiaos.doctype.conference_participant.conference_participant.register', form).then(res => {
				let msg = res.message
				if (msg.status == 'success') {
					make_payment(msg.ticket)
					document.forms.namedItem('register-form').reset()
				}
				if (msg.status == 'failed') {
					fail(msg.reason)
					document.forms.namedItem('register-form').reset()
				}
			})
		}
		else return
	}
</script>
{% endblock %}